import React, { useState, useCallback } from "react";
import { NextPage } from "next";
import { Badge, Select, Divider, message } from 'antd'
import * as dayjs from 'dayjs'

import { AdminLayout } from "@/layout";
import { SPTDataTable } from "@/components/SPTDataTable";
import { UserApi } from "@/api/user";

const User: NextPage = () => {
  const [users, setUsers] = useState(null);
  const [params, setParams] = useState(null);
  const [loading, setLoading] = useState(false);
  const [current, setCurrent] = useState(null);
  const getUsers = useCallback((params) => {
    return UserApi.getUsers(params).then(res => {
      setUsers(res[0]);
      setParams(params);
      return res
    })
  }, [])
  const updateInfo = (record, key, value) => {
    UserApi.updateInfo({ ...record, [key]: value }).then(res => {
      message.success("更新成功");
      getUsers(params);
    })
  }
  const columns = [
    {
      title: '账户',
      dataIndex: 'name',
      key: 'name',
      width: '10%',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'mail',
      width: '20%',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      render: role => {
        return role === 'admin' ? '管理员' : '访客';
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: status => {
        const isLocked = status === 'locked';
        return (
          <Badge
            color={isLocked ? 'gold' : 'green'}
            text={isLocked ? '已锁定' : '可用'}
          />
        );
      },
    },
    {
      title: '注册日期',
      dataIndex: 'createAt',
      key: 'createAt',
      render: date => dayjs.default(date).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];
  const actionColumn = {
    title: '操作',
    key: 'action',
    render: (_, record) => {
      const isAdmin = record.role === 'admin';
      const isLocked = record.status === 'locked';
      return (
        <span>
          {
            isLocked ? (<a onClick={() => updateInfo(record, 'status', 'active')}>启用</a>) : (<a onClick={() => updateInfo(record, 'status', 'locked')}>禁用</a>)
          }
          <Divider type="vertical" />
          {
            isAdmin ? (<a onClick={() => updateInfo(record, 'role', 'visitor')}>解除授权</a>) : (<a onClick={() => updateInfo(record, 'role', 'admin')}>授权</a>)
          }
        </span>
      )
    }
  }
  return (
    <AdminLayout>
      <SPTDataTable defaultTotal={0} data={users} onSearch={getUsers} columns={[...columns, actionColumn]} searchFields={[
        {
          label: '账号',
          field: 'name',
          msg: '请输入账号',
        },
        {
          label: '邮箱',
          field: 'email',
          msg: "请输入邮箱"
        },
        {
          label: '状态',
          field: 'status',
          children: (
            <Select style={{ width: 120 }}>
              <Select.Option key="locked" value="locked">已锁定</Select.Option>
              <Select.Option key="active" value="active">正常</Select.Option>
            </Select>
          )
        }
      ]} />
    </AdminLayout>
  );
};

export default User;
